<template>
  

  <div class="blogs-container">
    <div class="left">
      <router-view></router-view>
    </div>
    <div class="right">
      <div class="sub-right">
        <div class="title">分类</div>
        <ul v-loading="loading">
          <li v-for="item in classifies" :key="item.id">
            <i class="iconfont iconfangkuai"></i>
            <div class="name" @click="toClass(item)">{{item.name}}</div>
            <div class="count">（{{item.sum}}）</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  </div>


</template>

<script>
  import {blogs, classList} from 'network/app'
  export default {
    name: "Blogs",
    data() {
      return {
        loading: false,
        classifies: []
      }
    },
    methods: {
      
      getClassList(){
        this.loading = true
        classList()
          .then(res=>{
            this.classifies = res.data.data
          })
          .finally(()=>{
            this.loading = false
          })
      },
      toClass(item){
        this.$router.push("/blog/blogs/"+item.id)
      }
    },
    created() {
      
      this.getClassList()
    }
  }
</script>

<style lang="scss" scoped>
    .blogs-container{
      padding: .5rem 1rem;
      display: flex;
      border-bottom: 1px solid #d3d3d3;
      .left{
        flex-grow: 4;
        margin-right: .925926rem;
        
        height: auto;
        margin-bottom: .555556rem;
        
      }
      .right{
        flex-grow: 1;
        flex-shrink: 0;
        .sub-right{
          border: 1px solid #d3d3d3;
          border-radius: .185185rem;
          padding: .185185rem .185185rem .555556rem;
          height: auto;
          .title{
            padding: .555556rem 0 .37037rem;
            border-bottom: 1px solid #d3d3d3;
            font-size: .37037rem;
            font-weight: bold;
            color: #567;
          }
          ul{
            margin-left: .2rem;
            li{
              i{
                margin-right: .185185rem;
              }
              display: flex;
              padding: .277778rem 0;
              font-size: .296296rem;
              .name{
                cursor: pointer;
              }
              .name:hover{
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  ul{
    list-style: none;
  }

  @media (max-width: 916px) {
    
      .blogs-container{
        flex-direction: column;
        .left{
          margin-right: 0;
        }
      }
    
  }

</style>